<template>
    <div class="page-container">
        <div class="form-container">
            <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="派车单号">
                            <el-select v-model="state.query.entId" remote placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <!-- <el-option :label="1" :value="1" />
                                <el-option :label="2" :value="2" /> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发货单号">
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="派车状态">
                            <el-select remote-show-suffix v-model="state.query.sendCardStatus" placeholder="请选择"
                                style="width: 100%" clearable filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in sendCardStatusList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="货物描述">
                            <el-select v-model="state.query.client" placeholder="请选择" style="width: 100%" clearable
                                filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in client" :key="item.value" :label="item.label" :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="司机联系人">
                            <el-select v-model="state.query.department" placeholder="请选择" style="width: 100%" clearable
                                filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in department" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="仓库联系人">
                            <el-select v-model="state.query.salesman" placeholder="请选择" style="width: 100%" clearable
                                filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in salesman" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车牌号">
                            <el-select v-model="state.query.currency" placeholder="请选择" style="width: 100%" clearable
                                filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in state.current" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="仓库地址">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <!-- <el-option label="已审核" :value="1" />
                                <el-option label="待审核" :value="2" /> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-collapse-transition>
                    <div v-show="state.hidden">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="进仓时间">
                                    <el-date-picker v-model="recDateTime" type="daterange" range-separator="~"
                                        start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%"
                                        clearable value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-transition>
                <div class="flex-container" style="margin-left: 20px">
                    <el-button type="primary" icon="search" @click="getList" size="small">
                        搜索
                    </el-button>
                    <el-button type="info" icon="refresh" @click="reset" size="small">
                        重置
                    </el-button>
                    <el-button type="primary" @click="state.hidden = !state.hidden" size="small" style="padding: 8px 15px">
                        <div class="flex-container">
                            <el-icon style="transform: rotate(90deg)">
                                <MoreFilled />
                            </el-icon>
                            {{ state.hidden ? "折叠" : "更多条件" }}
                        </div>
                    </el-button>
                </div>
            </el-form>
        </div>
        <div class="tableDiv">
            <div class="btns">
                <div class="left">
                    <el-button @click="truckingOrderShow" type="primary">创建派车单</el-button>
                    <el-button @click="warehouseEntryCardsShow" type="primary">进仓派车信息填报</el-button>
                </div>
                <div class="right">
                    <el-button @click="customOpen">自定义列</el-button>
                    <el-button @click="refresh" icon="RefreshRight">刷新</el-button>
                </div>
            </div>
            <AppVxeTable class="vex-table-primary" stripe :tableData="state.tableData.data" @change="getList" :height="0"
                :tableOption="state.tableData.option" v-loading="state.tableData.loading">
                <vxe-column type="checkbox" width="40" align="center" fixed="left" />
                <vxe-column sortable v-for="item in state.customColumn" :key="item.prop" :field="item.prop"
                    :title="item.label" :width="item.width" showOverflowTooltip>
                    <template v-if="item.prop === 'dispatchNumber'" #default="{ row }">
                        <span style="color: #5a9cf8; cursor: pointer"
                            @click="toEditPage(row.sendCardStatus, row.dispatchNumber)">{{
                                row.dispatchNumber }}</span>
                    </template>
                    <template v-if="item.prop === 'sendCardStatus'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div style="width: 6px;height: 6px;border-radius: 50%;margin-right: 5px;background: #3B78FF"
                                class="left">
                            </div>
                            <div :style="row.sendCardStatus === 0 ? 'color: #000000D8' : ''" class="right">
                                {{ sendCardStatus[row.sendCardStatus] }}
                            </div>
                        </div>
                    </template>
                    <template v-if="item.prop === 'orderState'" #default="{ row }">
                        <span>{{ row.orderState }}</span>
                    </template>
                    <template v-if="item.prop === 'currency'" #default="{ row }">
                        <span>{{ row.currency }}</span>
                    </template>
                </vxe-column>

            </AppVxeTable>
        </div>
        <!-- 自定义列 -->
        <el-dialog class="dialog" v-model="state.custom.show" title="自定义列" width="800" :before-close="customHandleClose">
            <Draggbale ref="draggbale" :items="state.customColumn"></Draggbale>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetDraggbale">重置</el-button>
                    <el-button @click="customHandleClose">取消</el-button>
                    <el-button type="primary" @click="saveDraggbale">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 创建派车单 -->
        <el-dialog class="dialog" v-model="state.truckingOrder.show" title="创建派车单" width="450"
            :before-close="truckingOrderClose">
            <div class="ctn">
                <div class="left">
                    <span>*</span>选择合适的发货单:
                </div>
                <div class="right">
                    <el-table ref="taskTableRef" border @select="truckingOrderChange" stripe
                        :data="state.truckingOrder.data" v-loading="state.tableLoading">
                        <el-table-column type="selection" width="40" align="center" fixed="left" />
                        <el-table-column align="center" showOverflowTooltip sortable label="发货单号" prop="ConsignNum">
                            <template #default="{ row }">
                                <span style="color: #3B78FF;cursor: pointer;">{{ row.ConsignNum }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" showOverflowTooltip sortable label="拖柜类型" prop="haulingState">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="truckingOrderClose">取消</el-button>
                    <el-button type="primary" @click="truckingOrderSave">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 进仓派车 -->
        <el-dialog class="dialog" v-model="state.warehouseEntry.show" title="进仓派车信息填报" width="1000">
            <div class="warehouseEntry">
                <div class="title">仓库信息</div>
                <div class="stuffingInfo">
                    <div v-for="(item, index) in state.warehouseEntry.data" class="item">
                        <div class="itemTitle">
                            <div class="le">仓库地点{{ item.id }}</div>
                            <div class="ri" @click="delStuffing(item.id)">删除</div>
                        </div>
                        <div class="itemContent">
                            <div style="border: 0;" class="form-container">
                                <el-form :inline="true" label-width="100px" :size="'small'" ref="form">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="进仓时间">
                                                <div style="width: 100%;display:flex;justify-content: space-between;">
                                                    <el-date-picker v-model="item.warehouseEntryTime" type="datetime"
                                                        style="width: 67%" placeholder="" />
                                                    <el-select v-model="item.upDown" placeholder="请选择" style="width: 30%"
                                                        clearable filterable>
                                                        <el-option label="早上" :value="1" />
                                                        <el-option label="下午" :value="2" />
                                                    </el-select>
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="进仓地点">
                                                <el-select v-model="item.warehouseEntryAddress" placeholder="请选择"
                                                    style="width: 100%" clearable filterable>
                                                    <el-option label="POLAND" :value="1" />
                                                    <el-option label="amer" :value="2" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col> <el-col :span="12">
                                            <el-form-item label="进仓联系人">
                                                <el-select v-model="item.warehouseEntryPeo" placeholder="请选择"
                                                    style="width: 100%" clearable filterable>
                                                    <el-option label="张三" :value="1" />
                                                    <el-option label="李四" :value="2" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="进仓联系电话">
                                                <el-input v-model="item.warehouseEntryPho" clearable placeholder="请输入"
                                                    style="width: 100%" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div @click="addStuffing" class="add">+添加装柜地点</div>
                </div>
                <div style="margin-top: 20px;" class="title">司机信息填报</div>
                <div style="border: 0;" class="form-container">
                    <el-form :inline="true" label-width="90px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="司机联系人">
                                    <el-select v-model="state.warehouseEntry.driverInfoForm.driverName" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <el-option label="张三" :value="1" />
                                        <el-option label="李四" :value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="司机号码">
                                    <el-input v-model="state.warehouseEntry.driverInfoForm.driverPho" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车牌号码">
                                    <el-input v-model="state.warehouseEntry.driverInfoForm.driverPeople" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div style="margin-top: 10px;" class="title">进仓信息</div>
                <div style="border: 0;" class="form-container">
                    <el-form :inline="true" label-width="90px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="进厂时间">
                                    <el-date-picker v-model="state.warehouseEntry.warehouseEntryInfoForm.entryTime"
                                        type="datetime" style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="离厂时间">
                                    <el-date-picker v-model="state.warehouseEntry.warehouseEntryInfoForm.departureTime"
                                        type="datetime" style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="进仓时间">
                                    <el-date-picker v-model="state.warehouseEntry.warehouseEntryInfoForm.warehouseEntryTime"
                                        type="datetime" style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="附件上传">
                                    <el-upload v-model:file-list="fileList" class="upload-demo"
                                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                                        :limit="3" :on-exceed="handleExceed">
                                        <div style="display: flex;align-items: center;cursor: pointer;">

                                            <el-icon size="16" color="#3B78FF">
                                                <Upload />
                                            </el-icon><span style="color: #3B78FF;">上传附件</span>
                                        </div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="warehouseEntryClose">重置</el-button>
                    <el-button @click="warehouseEntryClose">取消并返回</el-button>
                    <el-button type="primary" @click="warehouseEntrySave">
                        确认填写
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";
import { MoreFilled } from "@element-plus/icons";
import { fileDownload } from "@/public/publicUtils";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import Draggbale from './components/draggbale.vue'
import AppVxeTable from "@/components/AppVxeTable.vue";
import { useStore } from "vuex";

const Store = useStore();

const route = useRoute();
const Router = useRouter();

//替换标题
Store.dispatch("tab/modifyTabTitle", {
    path: route.fullPath,
    title: '进仓派车列表',
});

//派车状态
let sendCardStatus = {
    0: '派单生成',
    1: '派车',
    2: '到厂',
    3: '离厂',
    4: '进仓',
}

//派车状态List
let sendCardStatusList = [
    { value: 0, label: '派单生成' },
    { value: 1, label: '派车' },
    { value: 2, label: '到厂' },
    { value: 3, label: '离厂' },
    { value: 4, label: '进仓' },
]

//货物描述
let client = [
    // { value: 0, label: '上海悠迪汽车配件厂' },
    // { value: 1, label: '台州硕阳机械有限公司' },
    // { value: 2, label: '涂俊梅' },
]
//司机联系人
let department = [
    // { value: 0, label: '财务部' },
    // { value: 1, label: '销售部' },
    // { value: 2, label: '人事部' },
]

//仓库联系人
let salesman = [
    // { value: 0, label: '涂俊梅' },
    // { value: 1, label: '张三' },
    // { value: 2, label: '李四' },
]

const state = reactive({
    // 查询条件
    query: {
        doccode: "", //业务编号
        entId: "", //结算对象名称
        invoice: "", //发票号
        blNo: "", //提单号
        saleId: "", //业务员
        feeStatus: 0, //核销状态
        balanceNo: "", //对账单号
        checkStatus: 0, //审核状态
        currency: "", //币种
        isIncome: "", //收支类型 0 付款 1 收款
        invoiceStatus: 0, //开票状态 0 未开票 1 已开票
        lock: true, //单票锁定
        outState: false, //退关状态
    },
    //自定义列
    customColumn: [
        { prop: 'dispatchNumber', label: '派车单号', },
        { prop: 'shipmentTrackingNumber', label: '发货单号', },
        { prop: 'sendCardStatus', label: '派车状态', },
        { prop: 'driverContact', label: '司机联系人', },
        { prop: 'driverContactNumber', label: '司机联系电话', },
        { prop: 'licenseNumber', label: '车牌号码', },
        { prop: 'warehouseAddress', label: '仓库地址', },
        { prop: 'warehouseContact', label: '仓库联系人', },
        { prop: 'warehouseContactNumber', label: '仓库联系电话', },
        { prop: 'goodsDescription', label: '货物描述', },
    ],
    //表格数据
    tableData: {
        data: [
            { dispatchNumber: 'JH2401704', shipmentTrackingNumber: 'SA24050019', sendCardStatus: 0, driverContact: '--', driverContactNumber: '--', licenseNumber: "--", warehouseAddress: '--', warehouseContact: '--', warehouseContactNumber: '--', goodsDescription: '--' },
            { dispatchNumber: 'JH2401704', shipmentTrackingNumber: 'SA24050019', sendCardStatus: 1, driverContact: '--', driverContactNumber: '--', licenseNumber: "--", warehouseAddress: '--', warehouseContact: '--', warehouseContactNumber: '--', goodsDescription: '--' },
            { dispatchNumber: 'JH2401704', shipmentTrackingNumber: 'SA24050019', sendCardStatus: 2, driverContact: '--', driverContactNumber: '--', licenseNumber: "--", warehouseAddress: 'xx装柜地点', warehouseContact: '张三', warehouseContactNumber: '174147474744', goodsDescription: '货物描述货物描述' },
            { dispatchNumber: 'JH2401704', shipmentTrackingNumber: 'SA24050019', sendCardStatus: 3, driverContact: '张三', driverContactNumber: '174874747788', licenseNumber: "粤BLLO88", warehouseAddress: 'xx装柜地点', warehouseContact: '张三', warehouseContactNumber: '174147474744', goodsDescription: '货物描述货物描述' },
            { dispatchNumber: 'JH2401704', shipmentTrackingNumber: 'SA24050019', sendCardStatus: 4, driverContact: '张三', driverContactNumber: '174874747788', licenseNumber: "粤BLLO88", warehouseAddress: 'xx装柜地点', warehouseContact: '张三', warehouseContactNumber: '174147474744', goodsDescription: '货物描述货物描述' },
        ],
        option: useTableOption(),
    },
    //自定义列数据
    custom: {
        show: false,
        data: []
    },
    //创建派车单数据
    truckingOrder: {
        show: false,
        data: [
            { ConsignNum: 'JH2401878', haulingState: '拼箱' },
            { ConsignNum: 'JH2401878', haulingState: '拼箱' },
            { ConsignNum: 'JH2401878', haulingState: '拼箱' },
            { ConsignNum: 'JH2401878', haulingState: '拼箱' },
        ],
        // option: useTableOption(),
        pick: {},
        loading: false

    },
    //进仓派车
    warehouseEntry: {
        show: false,
        data: [
            // {
            //     id: 1,
            //     warehouseEntryTime: "",
            //     warehouseEntryAddress: "",
            //     warehouseEntryPeo: "",
            //     warehouseEntryPho: "",
            // }
        ],
        driverInfoForm: {
            driverName: "",
            driverPho: "",
            driverPeople: "",
        },
        warehouseEntryInfoForm: {
            entryTime: '',
            departureTime: '',
            warehouseEntryTime: '',
        }
    }

})

//获取列表
function getList() {

}

//重置
function reset() {
    state.query = {
        doccode: "", //业务编号
        entId: "", //结算对象名称
        invoice: "", //发票号
        blNo: "", //提单号
        saleId: "", //业务员
        feeStatus: 0, //核销状态
        balanceNo: "", //对账单号
        checkStatus: 0, //审核状态
        currency: "", //币种
        isIncome: "", //收支类型 0 付款 1 收款
        invoiceStatus: 0, //开票状态 0 未开票 1 已开票
        lock: true, //单票锁定
        outState: false, //退关状态
    }
}

//自定义列dialog打开
function customOpen() {
    state.custom.show = true
}

//自定义列dialog关闭
function customHandleClose() {
    state.custom.show = false
}

//重置自定义列
function resetDraggbale() {
    ElMessage.success('重置成功')
}

//保存自定义列
function saveDraggbale() {
    ElMessage.success('保存成功')
    customHandleClose()
}

//刷新
function refresh() {
    ElMessage.success('刷新成功')
}

//创建派车弹窗打开
function truckingOrderShow() {
    state.truckingOrder.show = true
}

//创建派车弹窗关闭
function truckingOrderClose() {
    state.truckingOrder.show = false
}

//创建派车单单选
const taskTableRef = ref();
function truckingOrderChange(selection, row) {
    if (selection.length > 1) {
        let del_row = selection.shift();
        taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
    }
    state.truckingOrder.pick = selection
}

//创建派车弹窗保存
function truckingOrderSave() {
    if (JSON.stringify(state.truckingOrder.pick) == '{}') {
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch(() => {

        })
        return
    }
    ElMessage.success('保存成功')
    truckingOrderClose()
}

//进仓派车弹窗打开
function warehouseEntryCardsShow() {
    if (state.tableData.option.selected.length === 0) {
        ElMessage.warning('请选择数据')
        return
    }
    state.warehouseEntry.show = true
}

//进仓派车弹窗关闭
function warehouseEntryClose() {
    state.warehouseEntry.show = false
}

//进仓派车弹窗保存
function warehouseEntrySave() {
    if (state.warehouseEntry.data.length === 0) {
        console.log('1111')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch(() => {

        })
        return
    } else {
        console.log('222')
        for (const item of state.warehouseEntry.data) {
            if (Object.values(item).some(item1 => !item1)) {
                ElMessageBox.confirm(
                    '您的内容还未填写完毕，提交不成功',
                    '温馨提示',
                    {
                        confirmButtonText: '继续填写',
                        cancelButtonText: '取消',
                    }
                ).then(() => {

                }).catch();
                return
            }
        }
    }
    //如果state.warehouseEntry.cardsForm里面有任意数据没有填写就return
    if (Object.values(state.warehouseEntry.driverInfoForm).some(item => !item)) {
        console.log('333')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch()
        return
    }
    if (Object.values(state.warehouseEntry.warehouseEntryInfoForm).some(item => !item)) {
        console.log('333')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch()
        return
    }
    ElMessage.success('保存成功')
    warehouseEntryClose()
}


//添加仓库信息
function addStuffing() {
    state.warehouseEntry.data.push({
        id: state.warehouseEntry.data.length + 1,
        warehouseEntryTime: "",
        warehouseEntryAddress: "",
        warehouseEntryPeo: "",
        warehouseEntryPho: "",
    })
}

//删除仓库信息
function delStuffing(id) {
    state.warehouseEntry.data = state.warehouseEntry.data.filter(item => item.id !== id)
}

// 跳转详情页面
const toEditPage = async (sendCardStatus, id) => {
    console.log(sendCardStatus)
    Router.openTab({
        path: "/dispatching/warehouseEntryDetail",
        query: {
            status: sendCardStatus,
            title: `进仓派车详情${id}`
        },
    });
};


</script>

<style lang="scss" scoped>
.form-container {
    border: 1px solid #e8e8e8;
    padding: 6px 6px 6px 8px;
    background-color: #ffffff;

    :deep(.el-form-item--small .el-form-item__label) {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
    }

    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 4px;
    }

    :deep(.el-form--inline .el-form-item) {
        display: flex;
        margin-right: 0;
    }

    :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 8px;
    }
}

:deep(.el-checkbox.el-checkbox--large) {
    height: 0px;
}

:deep(.el-dialog__footer) {
    padding-bottom: 10px;
    text-align: center;
}

:deep(.el-table__cell) {
    height: auto;
}

:deep(.el-dropdown) {
    margin-right: 10px;
}

.tableDiv {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background-color: #ffffff;

    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 28px;
        // background-color: aqua;
        margin-bottom: 10px;
    }
}

.ctn {
    display: flex;
    justify-content: space-between;

    .left {
        width: 110px;
        font-size: 12px;

        span {
            color: #F5222D;
            margin-right: 2px;
        }
    }

    .right {
        width: calc(100% - 110px);
    }
}

.warehouseEntry {
    .title {
        width: 100%;
        background: #F5F8F7;
        font-size: 12px;
        padding: 4px 8px;
    }

    .stuffingInfo {
        margin-top: 8px;

        .item {
            .itemTitle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                border-radius: 2px;
                background: #E6F7FF;
                border: 1px solid #91D5FF;
                font-size: 12px;
                padding: 4px 16px;

                .ri {
                    font-size: 12px;
                    color: #3B78FFD8;
                    cursor: pointer;
                }
            }

            .itemContent {}
        }

        .add {
            color: #3B78FF;
            font-family: PingFang HK;
            font-weight: regular;
            font-size: 12px;
            line-height: 20px;
            letter-spacing: 0px;
            text-align: left;
            cursor: pointer;

        }
    }
}

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>